Skip to content

feat(wallet): add ConnectWalletButton and isConnectionRestoring state#7468

Merged
kernelwhisperer merged 3 commits into
developfrom
feat/wallet-restoring-spinner
May 19, 2026
Merged

feat(wallet): add ConnectWalletButton and isConnectionRestoring state#7468
kernelwhisperer merged 3 commits into
developfrom
feat/wallet-restoring-spinner

Conversation

@kernelwhisperer

@kernelwhisperer kernelwhisperer commented May 8, 2026

Copy link
Copy Markdown
Contributor

Summary

To Test

  1. Affiliate partner page with a previously connected wallet
  • Open the affiliate partner onboarding page
  • Refresh with a previously connected wallet
  • Verify the page shows the loading skeleton while wallet restoration is pending
  • Verify the page does not briefly show the disconnected onboarding CTA during restoration
  • After restoration completes, verify the correct partner state is shown
  1. Affiliate trader page with a previously connected wallet
  • Open the trader affiliate onboarding page
  • Refresh with a previously connected wallet
  • Verify the page shows the loading skeleton while wallet restoration is pending
  • Verify disconnected users still see Connect wallet after restoration completes
  • Verify connected users with no saved code see Add code

Background

With Wagmi/Viem we can detect wallet restoration through useIsRestoringConnection(). The affiliate pages now treat that state like other pending page data and show the existing loading skeleton instead of briefly rendering disconnected onboarding UI.

Summary by CodeRabbit

  • New Features

    • Added wallet restoration indicator displaying "Restoring wallet..." during reconnection attempts
    • Enhanced loading state handling in affiliate pages when wallet connection is being restored
  • Improvements

    • Updated affiliate onboarding button sizing for better UI presentation

Review Change Stack

@kernelwhisperer kernelwhisperer self-assigned this May 8, 2026
@vercel

vercel Bot commented May 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cowfi Ready Ready Preview May 19, 2026 9:00am
explorer-dev Ready Ready Preview May 19, 2026 9:00am
storybook Ready Ready Preview May 19, 2026 9:00am
swap-dev Ready Ready Preview May 19, 2026 9:00am
widget-configurator Ready Ready Preview May 19, 2026 9:00am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
cosmos Ignored Ignored May 19, 2026 9:00am
sdk-tools Ignored Ignored Preview May 19, 2026 9:00am

Request Review

@coderabbitai

coderabbitai Bot commented May 8, 2026

Copy link
Copy Markdown
Contributor

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

Walkthrough

This PR adds wallet connection restoring state detection and UI feedback. When a wallet reconnects after disconnection, users see a "Restoring wallet..." state instead of a blank or interactive button. The change introduces a new hook, updates wallet state types, and modifies Web3Status and affiliate pages to display appropriate loading states during reconnection windows.

Changes

Wallet Restoring State Feature

Layer / File(s) Summary
Wallet State Types
libs/wallet/src/api/types.ts, libs/ui/src/pure/Button/index.tsx
WalletInfo adds optional isConnectionRestoring field; ButtonPrimaryProps type exports button styling props including buttonSize.
Wallet Restoring Detection in useWalletInfo
libs/wallet/src/wagmi/updater.ts
useWalletInfo reads connection status, computes isConnectionRestoring when status is 'reconnecting', and includes it in memoized walletInfo return.
useIsRestoringConnection Hook
libs/wallet/src/wagmi/hooks/useIsRestoringConnection.ts, libs/wallet/src/index.ts
New hook combines connection status, account presence, and connector UID state to detect wallet restoration windows; exported from wallet barrel for use across app.
Web3Status Restoring UI Integration
apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx, apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
Web3Status derives isConnectionRestoring and passes it to Web3StatusInner; Web3StatusInner displays disabled "Restoring wallet..." button when restoring without account.
Affiliate Button Size Updates
apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderOnboard.tsx, apps/cowswap-frontend/src/modules/affiliate/containers/AffiliatePartnerOnboard.tsx
AffiliateTraderOnboard imports ButtonSize and applies buttonSize={ButtonSize.BIG} to connect CTA; prop and hook declaration ordering adjusted in onboarding components.
Affiliate Pages Restoring Loading State
apps/cowswap-frontend/src/pages/Account/AffiliatePartner.tsx, apps/cowswap-frontend/src/pages/Account/AffiliateTrader.tsx
Both affiliate pages import useIsRestoringConnection and compute showLoadingSkeleton combining restoring connection state with wallet/partner info loading status; conditionally render loading skeleton during restoration.
Localization
apps/cowswap-frontend/src/locales/en-US.po
Add "Restoring wallet..." translation entry with source reference to Web3StatusInner.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested reviewers

  • elena-zh
  • shoom3301

Poem

A wallet reconnects, no flicker or dread,
Just "Restoring..." shown in graceful thread—
No button to tap while the chain finds its way,
The UI stays honest throughout the relay. 🐰✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main changes: adding wallet restoration detection (isConnectionRestoring state) and related UI handling for connection restoration scenarios.
Description check ✅ Passed The description provides a clear summary with issue reference, testing instructions with checkboxes, and background context. However, it references an external Notion link instead of a GitHub issue number, which is a minor deviation from the template.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feat/wallet-restoring-spinner

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented May 8, 2026

Copy link
Copy Markdown

Deploying swap-dev with  Cloudflare Pages  Cloudflare Pages

Latest commit: 7a73c92
Status: ✅  Deploy successful!
Preview URL: https://17d8ae9b.swap-dev-5u6.pages.dev
Branch Preview URL: https://feat-wallet-restoring-spinne.swap-dev-5u6.pages.dev

View logs

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
apps/cowswap-frontend/src/modules/wallet/containers/ConnectWalletButton/index.tsx (1)

10-10: 💤 Low value

Consider exporting ConnectWalletButtonProps

The type is internal but since ConnectWalletButton is part of the public module API (re-exported from wallet/index.ts), exporting its props type allows consumers to build typed wrappers or pass forwarded props without having to re-derive the intersection type.

♻️ Proposed change
-type ConnectWalletButtonProps = ButtonPrimaryProps & { children?: ReactNode }
+export type ConnectWalletButtonProps = ButtonPrimaryProps & { children?: ReactNode }

And add the re-export to wallet/index.ts:

 export { ConnectWalletButton } from './containers/ConnectWalletButton'
+export type { ConnectWalletButtonProps } from './containers/ConnectWalletButton'

As per coding guidelines, "Public module API must be re-exported via the module index.ts" — the exported component's companion props type is part of that surface.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@apps/cowswap-frontend/src/modules/wallet/containers/ConnectWalletButton/index.tsx`
at line 10, Export the ConnectWalletButtonProps type so consumers can use its
shape: change the declaration of ConnectWalletButtonProps (currently type
ConnectWalletButtonProps = ButtonPrimaryProps & { children?: ReactNode }) to an
exported type and add a corresponding re-export from the wallet module index (so
the public API exposes ConnectWalletButtonProps alongside ConnectWalletButton);
update any imports that should rely on the public re-export instead of internal
paths.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@apps/cowswap-frontend/src/modules/wallet/containers/ConnectWalletButton/index.tsx`:
- Around line 17-24: The button currently spreads {...rest} before setting
disabled and onClick so caller-supplied disabled/onClick are ignored; fix
ConnectWalletButton by computing a final disabled value (e.g., const
finalDisabled = isConnectionRestoring || !!rest.disabled) and use
disabled={finalDisabled} on ButtonPrimary, then spread {...rest} (or spread
first and explicitly set disabled={finalDisabled} after) so a caller's
disabled=true is respected; keep the onClick override to call toggleWalletModal
when not restoring but add an inline comment above onClick in
ConnectWalletButton explaining the onClick override is intentional to avoid
future confusion.

---

Nitpick comments:
In
`@apps/cowswap-frontend/src/modules/wallet/containers/ConnectWalletButton/index.tsx`:
- Line 10: Export the ConnectWalletButtonProps type so consumers can use its
shape: change the declaration of ConnectWalletButtonProps (currently type
ConnectWalletButtonProps = ButtonPrimaryProps & { children?: ReactNode }) to an
exported type and add a corresponding re-export from the wallet module index (so
the public API exposes ConnectWalletButtonProps alongside ConnectWalletButton);
update any imports that should rely on the public re-export instead of internal
paths.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 7e0896c4-d74f-4898-9c78-1c02c5a2b9a8

📥 Commits

Reviewing files that changed from the base of the PR and between d2d7dab and ef098c3.

📒 Files selected for processing (10)
  • apps/cowswap-frontend/src/locales/en-US.po
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliatePartnerOnboard.tsx
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderOnboard.tsx
  • apps/cowswap-frontend/src/modules/wallet/containers/ConnectWalletButton/index.tsx
  • apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
  • apps/cowswap-frontend/src/modules/wallet/index.ts
  • apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
  • libs/ui/src/pure/Button/index.tsx
  • libs/wallet/src/api/types.ts
  • libs/wallet/src/wagmi/updater.ts

Comment thread apps/cowswap-frontend/src/modules/wallet/containers/ConnectWalletButton/index.tsx Outdated

@elena-zh elena-zh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hey @kernelwhisperer , the issue is partially fixed, I think.
The original issue is not 100% addressed:

  • open any of affiliate pages
  • connect to a wallet
  • refresh the page --> the page blinks with the 'connect wallet' banner before the cards with stats are loaded.

https://www.loom.com/share/763683430a0c45b793b2e66465742772

@kernelwhisperer

Copy link
Copy Markdown
Contributor Author

@elena-zh try now please 🙏

@elena-zh

elena-zh commented May 8, 2026

Copy link
Copy Markdown
Contributor

Hey @kernelwhisperer , kinda...
Now I started to see 'refecthing' on the card. But sometimes, disconnected state apepars anyways.
image

Might it be possible to show a generic loader on the page until the data is fetched?
image

@elena-zh elena-zh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See my message above

@kernelwhisperer

Copy link
Copy Markdown
Contributor Author

@elena-zh, there should be only 2 loading states left:

  1. Restoring connection
image
  1. Fetching data
image

Might it be possible to show a generic loader on the page until the data is fetched?

We do this, that's the state number 2

Now I started to see 'refecthing' on the card. But sometimes, disconnected state apepars anyways.

Could you record a video please?

@kernelwhisperer

Copy link
Copy Markdown
Contributor Author

@kernelwhisperer , i DO understand why they're displayed and appear there. My point is a bit different (and the issue I initially reported): I'm not in favor of showing 2-3 different screens while the page content is being loaded. I'm in favor of showing one generic loader that hides all these states, so there is not visible that the page changes 2-3 states while it is loading.

As requested, there is now just 1 loading screen, the 3 card skeleton.

@elena-zh elena-zh left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks way better now, thank you!

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
libs/wallet/src/wagmi/hooks/useIsRestoringConnection.ts (1)

24-24: 💤 Low value

Remove redundant double negation.

The double negation !!currentConnectorUid is unnecessary in a boolean context (if statement). Simplify to currentConnectorUid && !account.

♻️ Simplify boolean coercion
-  if (!!currentConnectorUid && !account) return true
+  if (currentConnectorUid && !account) return true
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@libs/wallet/src/wagmi/hooks/useIsRestoringConnection.ts` at line 24, In
useIsRestoringConnection (the condition using currentConnectorUid and account),
remove the redundant double-negation by changing the if-condition to use
currentConnectorUid directly instead of coercing with !!currentConnectorUid;
leave the rest of the logic intact so the branch still returns true when a
connector UID exists and account is falsy (i.e., keep the same behavior for
currentConnectorUid and account in the useIsRestoringConnection hook).
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@libs/wallet/src/wagmi/hooks/useIsRestoringConnection.ts`:
- Line 24: In useIsRestoringConnection (the condition using currentConnectorUid
and account), remove the redundant double-negation by changing the if-condition
to use currentConnectorUid directly instead of coercing with
!!currentConnectorUid; leave the rest of the logic intact so the branch still
returns true when a connector UID exists and account is falsy (i.e., keep the
same behavior for currentConnectorUid and account in the
useIsRestoringConnection hook).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: f438fcce-4001-4590-bbb0-19bd6c11c911

📥 Commits

Reviewing files that changed from the base of the PR and between 2e2dfb8 and d0b689c.

📒 Files selected for processing (12)
  • apps/cowswap-frontend/src/locales/en-US.po
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliatePartnerOnboard.tsx
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderOnboard.tsx
  • apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
  • apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx
  • apps/cowswap-frontend/src/pages/Account/AffiliatePartner.tsx
  • apps/cowswap-frontend/src/pages/Account/AffiliateTrader.tsx
  • libs/ui/src/pure/Button/index.tsx
  • libs/wallet/src/api/types.ts
  • libs/wallet/src/index.ts
  • libs/wallet/src/wagmi/hooks/useIsRestoringConnection.ts
  • libs/wallet/src/wagmi/updater.ts
✅ Files skipped from review due to trivial changes (1)
  • apps/cowswap-frontend/src/modules/affiliate/containers/AffiliatePartnerOnboard.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
  • libs/wallet/src/index.ts
  • libs/ui/src/pure/Button/index.tsx
  • libs/wallet/src/wagmi/updater.ts
  • apps/cowswap-frontend/src/modules/wallet/containers/Web3Status/index.tsx
  • libs/wallet/src/api/types.ts
  • apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants